<template>
	<view class="add-page">
		<u-form :model="lessionForm" ref="uForm" label-width="150" >
			<u-form-item label="星期:" prop="weekdayN">
				<u-input v-model="lessionForm.weekdayN" type="select" :border="true" @click="weekshow = true" placeholder="请选择星期"/>
				<u-select v-model="weekshow" :list="weekdaylist" @confirm="checkWeek" :defaut-value='[0]'></u-select>
			</u-form-item>
			<u-form-item label="班级名称:" prop="classname">
				<u-input v-model="lessionForm.classname" type="text" :border="true" :auto-height="true" placeholder="请填写班级名称"/>
			</u-form-item>
			<u-form-item label="开始时间:" prop="starttime">
				<u-input v-model="lessionForm.starttime" type="select" :border="true" @click="starttimeshow = true" placeholder="请选择开始时间"/>
				<u-picker mode="time" v-model="starttimeshow" :default-time="lessionForm.starttime" :params="timeparams" @confirm="checkStarttime"></u-picker>
			</u-form-item>
			<u-form-item label="结束时间:" prop="endtime">
				<u-input v-model="lessionForm.endtime" type="select" :border="true" @click="endtimeshow = true" placeholder="请选择结束时间"/>
				<u-picker mode="time" v-model="endtimeshow" :default-time="lessionForm.endtime" :params="timeparams" @confirm="checkEndtime"></u-picker>
			</u-form-item>
		</u-form>
		<view class="u-flex u-row-center">
			<view class="" style="margin-top: 50rpx;width: 50%;">
				<u-button type="warning" :ripple="true" ripple-bg-color="#909399" @click="addSave">确认创建</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				weekshow: false,
				starttimeshow: false,
				endtimeshow: false,
				timeparams: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				
				lessionForm: {
					weekdayN:'',
					weekday: '',
					classname: '',
					starttime: '',
					endtime: ''
				},
				weekdaylist: [{
						label: '星期一',
						value: 1
					},
					{
						label: '星期二',
						value: 2
					},
					{
						label: '星期三',
						value: 3
					},
					{
						label: '星期四',
						value: 4
					},
					{
						label: '星期五',
						value: 5
					},
					{
						label: '星期六',
						value: 6
					},
					{
						label: '星期日',
						value: 7
					}
				],
				rules:{
					weekdayN: [
						{required: true, message: '必须选择星期',trigger: 'change'}
					],
					classname: [
						{required: true, message: '必须填写课程名称',trigger: 'change'}
					],
					starttime: [
						{required: true, message: '必须填写开始时间',trigger: 'change'}
					],
					endtime:[
						{required: true, message: '必须填写结束时间',trigger: 'change'}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			checkWeek(val) {
				this.lessionForm.weekday = val[0].value
				this.lessionForm.weekdayN = val[0].label
			},
			checkStarttime(val) {
				const {hour, minute} = val
				this.lessionForm.starttime = hour + ':' + minute
			},
			checkEndtime(val) {
				const {hour, minute} = val
				this.lessionForm.endtime = hour + ':' + minute
			},
			checktime(stime, etime){
				if(stime.slice(0,2)*1< etime.slice(0,2)*1){
					return true
				}else if(stime.slice(0,2)*1> etime.slice(0,2)*1){
					return false
				}else if(stime.slice(0,2)*1 === etime.slice(0,2)*1){
					if (stime.slice(-2)*1 >= etime.slice(-2)*1){
						return false
					}else {
						return true
					}
				}
			},
			addSave(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const {weekday,classname,starttime,endtime} = this.lessionForm
						this.checktime(starttime,endtime)
						if(this.checktime(starttime,endtime)){
							const param = {
								weekday,classname,starttime,endtime
							}
							this.$http('/class/addclass',param, (res) => {
								uni.navigateTo({
									url:"/pages/lession/lession"
								})
							})
						}else{
							uni.showToast({
								title:'开始时间必须早于结束时间!',
								icon: 'none'
							})
						}
						
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.add-page{
	/* margin: 20rpx; */
	padding: 20rpx;
	background-color: #fff;
	height: 92vh;
	box-sizing: border-box;
}
</style>
